<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>民主评测投票</title>
    <script src="static/vue.js"></script>
    <script src="static/axios.js"></script>
    <script src="static/jquery-1.12.4.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        body {
            background-color: #F2F6F9;
        }

        .titles {
            width: 100%;
        }

        .title1 {
            width: 169px;
            height: 172px;
            margin: 46px auto 0;
        }

        .title1 img {
            width: 169px;
            height: 172px;
        }

        .title2 {
            margin: 7px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 36px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .title3 {
            width: 865px;
            margin: 15px auto 0;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .content {
            margin: 50px auto 0;
            width: 1000px;
            background-color: #FFFFFF;
            font-size: 14px;
            box-shadow: 0px 0px 5px 0px rgba(170, 170, 170, 1);
            font-family: Roboto;
        }

        .div {
            width: 100%;
            height: 1px;
        }

        .ctop {
            width: 900px;
            height: 5px;
            background-color: #F2F6F9;
            margin: 24px auto 0;
        }

        .head1 {
            background-color: #FFFFFF;
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 36px;
        }

        .head1 img {
            width: 50px;
            height: 50px;
        }

        .head1 div {
            line-height: 50px;
            color: rgba(16, 16, 16, 1);
            font-size: 24px;
            font-family: SourceHanSansSC-regular;
        }

        .c1 {
            width: 100%;
            margin-top: 20px;
        }

        .c11 {

        }

        .c11 span:nth-child(1) {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-left: 56px;
            line-height: 30px;
            border-radius: 50%;
            background-color: rgba(43, 117, 242, 1);
            color: #FFffff;
            font-size: 18px;
            text-align: center;
            font-family: Roboto;
        }

        .c11 span:nth-child(2) {
            display: inline-block;
            margin-left: 10px;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            text-align: center;
            font-family: SourceHanSansSC-regular;
        }

        .c12 {
            margin-left: 96px;
        }

        span {
            display: inline-block;
        }

        .ctitle1 {
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            font-family: SourceHanSansSC-bold;
        }

        .ctitle1 span:nth-child(1) {
            font-weight: 600;
        }

        .ctitle1 span:nth-child(2) {
            margin-left: 10px;
        }

        .choose1 {
            height: 40px;
            margin-top: 5px;
            display: flex;
        }

        .choose1 label {

        }

        .cd {
            display: flex;
        }

        .cd1 {
            height: 40px;
            line-height: 40px;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            margin: 0 30px 0 5px;
            font-family: SourceHanSansSC-regular;
        }

        .labels {
            width: 23px;
            height: 23px;
            margin-top: 8px;
            border-radius: 50%;
            border: 1px solid #cccccc;

        }

        .labelsc {
            background-color: rgba(43, 117, 242, 1);
            background-image: url("imgs/勾.png");
            background-size: cover;
        }

        .inp1 {
            display: inline-block;
            width: 23px;
            height: 23px;
            line-height: 40px;
            background-color: #fff;
            cursor: pointer;
            opacity: 0;
        }

        .c123 {

        }

        .choose3 {
            height: 40px;
            margin-top: 5px;
            display: flex;
        }

        .cd2 {
            display: flex;
        }

        .labels2 {
            width: 24px;
            height: 24px;
            margin-top: 8px;
            border: 1px solid #cccccc;
        }

        .inp2 {
            width: 24px;
            height: 24px;
            line-height: 40px;
            background-color: #fff;
            display: inline-block;
            cursor: pointer;
            opacity: 0;
        }

        .cd3 {
            height: 40px;
            line-height: 40px;
            color: rgba(16, 16, 16, 1);
            font-size: 18px;
            margin: 0 30px 0 5px;
            font-family: SourceHanSansSC-regular;
        }

        .c13 {
            width: 900px;
            height: 1px;
            margin: 30px auto 2px;
            background-color: #FFDFDFDF;
        }

        .cbottom {
            width: 280px;
            height: 50px;
            margin: 30px auto;
            line-height: 50px;
            border-radius: 4px;
            background-color: rgba(43, 117, 242, 1);
            color: white;
            font-size: 20px;
            text-align: center;
            font-family: Roboto;
            cursor: pointer;
        }

        .dd {
            width: 100%;
            height: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="titles">
        <div class="title1">
            <img src="imgs/调查报告.gif">
        </div>
        <div class="title2">
            民主测评投票
        </div>
        <div class="title3">
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
    <div class="content">
        <div class="div"></div>
        <div class="ctop"></div>
        <div class="content1" v-for="(item,index) in list">
            <div class="head1"><!--------子标题------------->
                <img src="imgs/画笔.png" alt="">
                <div>{{item.head}}</div>
            </div>
            <div class="c1" v-for="(item1,index1) in item.list1"><!------1赵萌+choose------->
                <div class="c11"><!------1赵萌------>
                    <span>{{item1.num1}}</span><span>{{item1.name1}}</span>
                </div>
                <div class="c12">
                    <div class="c121" v-for="(item2,index2) in item1.list2"><!----------颜值+等级------------>
                        <div class="ctitle1"><!-------1颜值------>
                            <span>{{item2.num2}}</span><span>{{item2.name2}}</span>
                        </div>
                        <div class="choose1"><!-----------高中低------------->
                            <div class="cd" v-for="(item3,index3) in item2.list3">
                                <label :class="{labelsc:item3.select,labels:true}"
                                       @click="selects(index,index1,index2,index3)">
                                    <input class="inp1" type="radio" :name="item3.names1">
                                </label>
                                <div class="cd1">{{item3.name3}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="c123" v-for="(item4,index4) in item1.list4">
                        <div class="ctitle1">
                            <span>{{item4.num4}}</span><span>{{item4.name4}}</span>
                        </div>
                        <div class="choose3">
                            <div class="cd2" v-for="(item5,index5) in item4.list5">
                                <label class="labels2" :class="{labelsc:item5.select2}"
                                       @click="selects2(index,index1,index4,index5)">
                                    <input class="inp2" type="checkbox" :name="item5.names3">
                                </label>
                                <div class="cd3">{{item5.name5}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="c13"></div>
            </div>
            <div class="c2">

            </div>
        </div>
        <div class="cbottom">提交</div>
        <div class="dd"></div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            list: [

            ]

        },
        methods: {
            selects(index, index1, index2, index3) {
                for (var i = 0; i < this.list[index].list1[index1].list2[index2].list3.length; i++) {
                    if (i == index3) {
                        this.list[index].list1[index1].list2[index2].list3[i].select = true;
                    }
                    else {
                        this.list[index].list1[index1].list2[index2].list3[i].select = false;
                    }
                }
            },
            selects2(index, index1, index4, index5) {
                this.list[index].list1[index1].list4[index4].list5[index5].select2 = !this.list[index].list1[index1].list4[index4].list5[index5].select2;
            }
        },

        created(){
            var _this=this;
            axios.get('http://localhost:8091/mzpc').then(function (res) {
                _this.list=res.data;
            });
        }

    });
</script>
</body>
</html>